<template>
  <div>
    <el-dialog
      @close="onClose"
      :visible.sync="centerDialogVisible"
      title="复制应付"
    >
      <el-row :gutter="0">
        <el-form
          ref="params"
          :model="paramsData"
          :rules="rules"
          size="mini"
          label-width="120px"
          label-position="left"
        >
          <el-col :span="12">
            <el-form-item label="运单号" prop="waybillNo">
              <el-input
                v-model="paramsData.waybillNo"
                placeholder="请输入运单号"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            &nbsp;
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="queryWaybillPayable"
              >查询</el-button
            >
          </el-col>
        </el-form>
      </el-row>
      <el-row :gutter="0">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="400"
          @selection-change="selectL"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="公司" width="120" prop="serCusId">
          </el-table-column>
          <el-table-column prop="costName" label="费用名称" width="120">
          </el-table-column>
          <el-table-column prop="unitPrice" label="单价" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="count" label="数量" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="currency" label="币种" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="totalCost" label="总额" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="billType"
            label="账单类型"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </el-row>
      <div slot="footer" v-loading.fullscreen.lock="fullscreenLoading">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="copyToPayable">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

export default {
  inheritAttrs: false,
  components: {},
  props: {
    payableData: {
      type: Array,
      default: function(params) {
        return [];
      }
    },
    templateType: {
      type: String,
      default: "payable"
    }
  },

  data() {
    return {
      listSelect: [],
      listSelectId: [],
      fullscreenLoading: false,
      centerDialogVisible: false,
      tableData: [],
      multipleSelection: [],
      paramsData: {
        waybillNo: undefined
      },
      rules: {
        waybillNo: [
          {
            required: true,
            message: "请输入单行文本运单号",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    selectL(selection, row) {
      this.listSelect = selection;
      this.listSelectId = selection.map(item => item.id);
    },
    copyToPayable() {
      this.listSelect.forEach(element => {
        element.id = null;
        element.remain = element.totalCost;
        this.payableData.push(element);
        if (this.templateType === "payable") {
          this.$parent.$refs.payableHotTable.checkRowInChange(
            "add",
            this.payableData.length - 1
          );
        }
      });
      this.centerDialogVisible = false;
    },
    queryWaybillPayable() {
      this.$refs["params"].validate(valid => {
        if (valid) {
          var param = {};
          param["waybillNo"] = this.paramsData.waybillNo;
          this.fullscreenLoading = true;
          ajax("queryWaybillPayable", param).then(
            res => {
              this.fullscreenLoading = false;
              if (res.code != 200) {
              } else {
                this.tableData = res.data;
              }
            },
            error => {
              console.log(error);
            }
          );
        }
      });
    },
    onOpen() {},
    onClose() {
      this.$refs["params"].resetFields();
    },
    close() {
      this.centerDialogVisible = false;
    },
    handelConfirm() {
      this.$refs["params"].validate(valid => {
        if (!valid) return;
        this.close();
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
<style></style>
